{% extends 'base.html' %}

{% block contents_inner %}
    <div class="col-12">
        <div class="section-content">
            <div class="content-head">
                <h4 class="content-title">空气质量数据表</h4>
                <div class="corner-content float-right">
                    <button class="content-settings" data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Settings"><i class="fa fa-cog"></i></button>
                    <button class="content-refresh" data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Reload"><i class="fa fa-refresh"></i></button>
                    <button class="content-collapse" data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Collapse"><i class="fa fa-angle-down"></i></button>
                    <button class="content-close" data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Close"><i class="fa fa-close"></i></button>
                </div>
            </div>
            <div class="content-details show">
                <div id="data-table_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4">
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="dataTables_length" id="data-table_length"><label>展示<select
                                    name="data-table_length" aria-controls="data-table"
                                    class="form-control form-control-sm">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select>条目</label></div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div id="data-table_filter" class="dataTables_filter">
                                <label>搜索:
                                    <input type="search" class="form-control form-control-sm" placeholder="" aria-controls="data-table">
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="data-table" class="table data-table table-striped table-bordered dataTable"
                                   role="grid" aria-describedby="data-table_info">
                                <thead>
                                <tr role="row">
                                    <th class="sorting_asc" tabindex="0" aria-controls="data-table" rowspan="1"
                                        colspan="1" aria-sort="ascending"
                                        aria-label="Name: activate to sort column descending" style="width: 194.406px;">
                                        ID
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Position: activate to sort column ascending"
                                        style="width: 140.844px;">省会
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Office: activate to sort column ascending"
                                        style="width: 140.844px;">城市
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Age: activate to sort column ascending" style="width: 220px;">
                                        日期
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Start date: activate to sort column ascending"
                                        style="width: 139.156px;">AQI
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">PM2.5
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">PM10
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">So2
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">No2
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">CO
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">O3
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">复合指数
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">当日排行
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">主要污染物
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">温度
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">湿度
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">风速
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">风向
                                    </th>
                                    <th class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1"
                                        aria-label="Salary: activate to sort column ascending"
                                        style="width: 111.703px;">天气
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for foo in page_obj %}
                                    <tr role="row">
                                        <td class="sorting_1">{{ foo.id }}</td>
                                        <td>{{ foo.province }}</td>
                                        <td>{{ foo.city }}</td>
                                        <td>{{ foo.time }}</td>
                                        <td>{{ foo.aqi }}</td>
                                        <td>{{ foo.pm2_5 }}</td>
                                        <td>{{ foo.pm10 }}</td>
                                        <td>{{ foo.so2 }}</td>
                                        <td>{{ foo.no2 }}</td>
                                        <td>{{ foo.co }}</td>
                                        <td>{{ foo.o3 }}</td>
                                        <td>{{ foo.complexindex }}</td>
                                        <td>{{ foo.rank }}</td>
                                        <td>{{ foo.primary_pollutant }}</td>
                                        <td>{{ foo.temp }}</td>
                                        <td>{{ foo.humi }}</td>
                                        <td>{{ foo.windlevel }}</td>
                                        <td>{{ foo.winddirection }}</td>
                                        <td>{{ foo.weather }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-5">
                            <div class="dataTables_info" id="data-table_info" role="status" aria-live="polite">
                                显示{{ total_dataset_count }}个条目中的{{ page_obj.count }}个
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-7">
                            <div class="dataTables_paginate paging_simple_numbers" id="data-table_paginate">
                                <ul class="pagination">
                                    {% if page_obj.has_previous %}
                                        <li class="paginate_button page-item previous" id="data-table_previous">
                                            <a href="{% url 'dataset:display' %}?page={{ page_obj.previous_page_number }}" aria-controls="data-table" data-dt-idx="0" tabindex="0" class="page-link">
                                                上一页
                                            </a>
                                        </li>
                                    {% endif %}
                                    <li class="paginate_button page-item active">
                                        <a href="{% url 'dataset:display' %}?page={{ page_obj.number }}" aria-controls="data-table" data-dt-idx="1" tabindex="0" class="page-link">{{ page_obj.number }}</a>
                                    </li>
                                    {% if page_obj.has_next %}
                                        <li class="paginate_button page-item next" id="data-table_next">
                                            <a href="{% url 'dataset:display' %}?page={{ page_obj.next_page_number }}" aria-controls="data-table" data-dt-idx="7" tabindex="0" class="page-link">
                                                下一页
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
